{extend name="Public:base" /}
{block name="main"}
<!-- 路径导航 start -->
<ol class="breadcrumb">
  <li><i class="glyphicon glyphicon-home"></i>&nbsp;&nbsp;<a href="#">后台首页</a></li>
  <li class="active">后台管理中心</li>
</ol>
<!-- 路径导航 end -->

<div class="panel panel-default">
    <div class="panel-heading"> <i class="glyphicon glyphicon-th-list"></i> 栏目页面</div>
    <div class="panel-body">
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">
                    <!-- 添加按扭 start -->
                    <form class="navbar-form navbar-left">
                        <a href="{:url('add')}" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> 添加</a>
                        <button id="all-del" data-toggle="modal" data-target=".bs-example-modal-sm" type="button" class="btn btn-danger"><i class="glyphicon glyphicon-trash"></i> 删除</button>
                    </form>
                    <!-- 添加按扭 end -->
                </div>
                <div class="col-md-10">
                    <form class="navbar-form navbar-right" role="search" action="{:url()}">
                        <!-- 单项组 start -->
                        <div class="input-group">
                          <span class="input-group-addon" id="sizing-addon1">文章标题</span>
                          <input name="title" type="text" class="form-control" placeholder="大家都在搜" aria-describedby="sizing-addon1">
                        </div>
                        <!-- 单项组 end -->
                        <!-- 单独下拉 start -->
                        <div class="input-group">
                            <select class="form-control" name="status" id="">
                              <option value="">状态</option>
                              <option value="1">正常</option>
                              <option value="-1">禁用</option>
                            </select>
                        </div>
                        <!-- 单独下拉 end -->
                        <!-- 时间控件 start -->
                        <div class="input-group date form_datetime" data-date="" data-date-format="hh:ii" data-link-field="hh:ii">
                            <input class="form-control" size="14" type="text" value="" placeholder="发表时间" readonly="">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <!-- 时间控件 end -->
                        <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i> 筛选</button>
                    </form>
                </div>
            </div>
          </div>
        </nav>

        <table class="table table-bordered table-hover">
            <tr>
                <th><input name="checked-id" id="all-box" type="checkbox"></th>
                <th>id</th>
                <th>标题</th>
                <th>作者</th>
                <th>状态</th>
                <th>发表日期</th>
                <th>分类</th>
                <th>操作</th>
            </tr>
            {foreach $list as $vo}
            <tr>
                <td><input name="id" type="checkbox" value="{$vo.id}"></td>
                <td>{$vo.id}</td>
                <td>{$vo.title}</td>
                <td>{$vo.author}</td>
                <td>{$vo.status}</td>
                <td>{$vo.create_time}</td>
                <td>{$vo.cid}</td>
                <td>
                    <a href=""><span class="label label-primary e-action"><i class="glyphicon glyphicon-eye-open"></i></span></a>
                    <a href="{:url('edit',array('id'=>$vo['id']))}"><span class="label label-info e-action"><i class="glyphicon glyphicon-pencil"></i></span></a>
                    <span link="{:url('del',array('id'=>$vo['id']))}" data-toggle="modal" data-target=".bs-example-modal-sm" class="label label-danger e-action hand del"><i class="glyphicon glyphicon-trash"></i></span>
                </td>
            </tr>
            {/foreach}
        </table>
        <nav aria-label="...">
            {$page}
        </nav>
    </div>
</div>
<!-- 模糊弹出框 start -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="mySmallModalLabel">确认删除吗？</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <a id="del" href=""><button type="button" class="btn btn-danger center-block">确定</button></a>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-info center-block" data-dismiss="modal" aria-label="Close">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 模糊弹出框 end -->
{/block}

{block name="javascript"}
<script type="text/javascript">
    $(function(){
        //删除操作
        $(".del").click(function(){
            $("#del").attr('href','#');
            var url = $(this).attr('link');
            $("#del").attr('href',url);
        });
        //批量删除操作
        $("#all-del").click(function(){
            var str_id = '';
            $("input[name='id']:checked").each(function(i){
                var id      = $(this).val();//[i].val();
                str_id      += id + ',';
            });
            
            if( str_id == '' ) {
                alert('请选择要删除的数据');
                return false;
            }
            $("#del").attr('href','#');
            var url = '{:url("Article/dels")}?ids=' + str_id;
            $("#del").attr('href',url);
        });

        //时间控件
        $(".form_datetime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",

        });

    });
</script>
{/block}